<template>
  <div class="mobile">
    <div class="m-bar">
      <el-row>
        <el-col :span="22">{{ salon.sname }} - {{ name }}</el-col>
        <el-col :span="2"><van-icon name="cross" @click="logout" /></el-col>
      </el-row>
    </div>
    <div class="m-summary">
      <p style="color: red">总业绩：{{ totalDeal }}元</p>
      <p style="color: green">总成本：{{ totalCost }}元</p>
    </div>
    <router-view />
    <div style="height: 50px" />
    <van-tabbar route>
      <van-tabbar-item to="/mobile/shopkeeper/money" icon="balance-o">业绩</van-tabbar-item>
      <van-tabbar-item to="/mobile/shopkeeper/cost" icon="shop-o">成本</van-tabbar-item>
      <van-tabbar-item to="/mobile/shopkeeper/approve" icon="shop-o">审批</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Tabbar from 'vant/lib/tabbar';
import TabbarItem from 'vant/lib/tabbar-item';
import 'vant/lib/tabbar/style';
import 'vant/lib/tabbar-item/style';
import { getSalon } from '@/api/txs';
import { getTotalBySid } from '@/api/mobile_ym';

export default {
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  data() {
    return {
      salon: {
        sname: '',
      },
      totals: [0, 0],
    };
  },
  computed: {
    ...mapGetters(['openId', 'name']),
    totalDeal() {
      return this.totals[0];
    },
    totalCost() {
      return this.totals[1];
    },
  },
  created() {
    this.fetchData();
  },
  methods: {
    async logout() {
      await this.$store.dispatch('user/logout').then(res => {
        this.$router.push(`/login`);
      });
    },
    fetchData() {
      getSalon(this.openId).then(res => {
        this.salon = res.data.data;
      });
      getTotalBySid(this.openId).then(res => {
        this.totals = res.data.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mobile {
  background-color: #f7f8fa;
  height: 100%;
  .m-bar {
    background-color: #fff;
    color: #c31171;
    font-size: 30px;
    line-height: 80px;
    text-align: center;
    box-shadow: 0px 0px 10px rgb(201, 201, 201);
    margin-bottom: 10px;
  }
  .m-summary {
    display: flex;
    font-size: 30px;
    // line-height: 80px;
    // margin-bottom: 20px;
    justify-content: space-between;
    width: 100%;
    padding: 0 50px 0 50px;
  }
}
</style>
